<template>
    <div class="lyric_Box" v-if="lyric!=''">
        <scroll class="lyric_content1" ref="maxscroll">
            <ul>
                <li v-for="(item,i) in lyricList" :key="i" :class="{li_action:i===lyricindex}">
                    <!-- :class="{ li_action:getitembg(i) }" -->
                    {{ item.lyric[1] }}
                </li>
            </ul>
        </scroll>
    </div>
</template>

<script>
import scroll from './Scroll.vue';

export default {
    data() {
        return {
            lyricList: [],   // 歌词
            lyriccont: [],   // 单句歌词
            lyricindex: -1,  // 循环索引值，默认为-1
            maxindex: 0,     // 控制循环时 移动的距离
        }
    },
    watch:{
        lyric(){
            this.lyricindex=-1;
            this.maxindex=0;
            this.getlyricList(this.lyric);
        }
    },
    methods: {
        getlyricList(lyric){
            var RegExp=/\[(\d*:\d*\.\d*)/; //[00:00.10
            var str=[],timeArr=[],lyricArr=[];  // 全部歌词数组， 歌词时间， 单句歌词， 合并后的数组

            /* 将歌词转换成数组 */
            str=lyric.split('\n');
            
            /* 处理歌词 */
            str.forEach(item => {
                /* 获取歌词 */
                var lrc= item.split(']');
                // console.log(lrc);

                /* 处理时间 */
                var resTime = RegExp.exec(item);
                if(resTime !== ''&& resTime !== null){
                    lyricArr.push(lrc);
                    
                    var resTime2 = resTime[1].split(':');
                    var minite = parseInt(resTime2[0])*60; // 分
                    var second = parseFloat(resTime2[1]); // 秒
                    var time=parseFloat(Number(minite+second).toFixed(2)); //toFixed返回值是String
                    timeArr.push(time);
                };
            });

            /* 合并歌词 */
            for( var i=0; i<timeArr.length; i++){
                var lyricItem = { 
                    time: timeArr[i], 
                    lyric: lyricArr[i],
                }
                this.lyriccont.push(lyricItem);
                // this.lyricList.push(this.lyriccont);
            }

            /* 排序 */
            this.lyricList = this.lyriccont.sort((a,b)=>{
                return a.time-b.time;
            });
        },

        /* 滑动 */
        maxScroll( time = 0 ){
            if( this.lyricindex > this.lyricList.length-2 ) return;
            if( time >= this.lyricList[ this.lyricindex + 1 ].time ){  // 当时间大于当前播放时间
                this.lyricindex++;
                if( this.lyricindex < 5 || this.lyricindex >= this.lyricList.length-5) return; 
                this.maxindex++;
                this.$refs.maxscroll.scrollTo(0, -26 * this.maxindex, 2000);
            }
        },

        // getitembg(Index){
        //     if(Index == this.lyricindex) {
        //         // console.log(Index +"--"+ this.lyricindex);
        //         return true;
        //     }
        //     else{
        //         return false;
        //     }
        // }
    },
    components:{
        scroll,
    },
    props: ['lyric'],
}
</script>

<style>
.lyric_content1{
    height: 100%;
    overflow: hidden;
}

.lyric_content1 li{ 
    list-style: none; 
    text-align: center; 
    line-height: 26px; 
    color: #8b8b8b;
    font-size: 14px;
    font-weight: 400; 
}

.lyric_content1 .li_action{
    font-size: 16px;
    color: #b82525;
}
</style>